<template>
  <div class="post">
    <div style="height: 40px">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>交流论坛</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-form
      :model="formData"
      inline
      ref="formData"
      :rules="rules"
      style="text-align: right"
    >
      <el-form-item label="标题" prop="postTitle">
        <el-input
          v-model="formData.postTitle"
          placeholder="请输入标题"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="queryPost">查询帖子</el-button>
        <el-button type="primary" @click="dialogFormVisible = true"
          >发布帖子</el-button
        >
      </el-form-item>
    </el-form>
    <!-- tabs切换 -->
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="最新帖子" name="newPost">
        <div v-loading="postLoading" element-loading-text="拼命加载中">
          <CommonPostItemView
            :empty="'暂无最新贴'"
            :postData="postData"
          ></CommonPostItemView>
        </div>
      </el-tab-pane>
      <el-tab-pane label="往期发布" name="oldPost">
        <div v-loading="postLoading" element-loading-text="拼命加载中">
          <CommonPostItemView
            :empty="'暂无往期数据'"
            :postData="postData"
          ></CommonPostItemView>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-pagination
      v-show="postData.length > 0"
      layout="prev, pager, next"
      :current-page="currentPage"
      @current-change="handleCurrentChange"
      :total="total"
      :page-count="7"
      style="text-align: right; margin-top: 20px"
    >
    </el-pagination>
    <!-- 添加帖子 -->
    <el-dialog
      title="添加帖子"
      width="40%"
      :visible.sync="dialogFormVisible"
      @close="closeDialog"
      :close-on-click-modal="false"
    >
      <el-form
        :model="insertForm"
        :rules="insertRules"
        ref="insertForm"
        class="insertForm"
      >
        <el-form-item
          label="帖子标题"
          prop="postTitle"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="insertForm.postTitle"
            placeholder="帖子标题"
            autocomplete="off"
            :clearable="true"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="帖子内容"
          prop="content"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="insertForm.content"
            type="textarea"
            :rows="6"
            placeholder="请输入内容"
            autocomplete="off"
            maxlength="500"
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="insert" :loading="insertLoading"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import CommonTitle from "@/components/CommonTitleView.vue";
import CommonPostItemView from "@/components/CommonPostItemView.vue";
import { getNewPost, getOldPost, insertPost } from "@/api/client/post";
export default {
  name: "PostView",
  components: {
    CommonTitle,
    CommonPostItemView,
  },
  data() {
    return {
      formData: {
        postTitle: "",
      },
      rules: {
        postTitle: [{ required: true, message: "请输入标题", trigger: "blur" }],
      },
      insertForm: {
        postTitle: "",
        identity: "user",
        content: "",
      },
      insertRules: {
        postTitle: [
          { required: true, message: "请输入帖子标题", trigger: "blur" },
        ],
        content: [
          { required: true, message: "请输入帖子内容", trigger: "blur" },
        ],
      },
      activeName: "newPost",
      postData: [],
      page: 1,
      pageSize: 10,
      total: 0,
      currentPage: 1,
      postLoading: false,
      dialogFormVisible: false,
      insertLoading: false,
      formLabelWidth: "120px",
    };
  },
  created() {
    this.getNewPost();
  },
  methods: {
    // 查询帖子
    queryPost() {
      this.$refs.formData.validate((v) => {
        if (v) {
          this.page = 1;
          if (this.activeName === "newPost") {
            this.getNewPost();
          } else if (this.activeName === "oldPost") {
            this.getOldPost();
          }
        }
      });
    },
    // 切换tabs
    handleClick(tab, event) {
      this.page = 1;
      this.currentPage = 1;
      this.$refs.formData.resetFields();
      if (tab.name === "newPost") {
        this.getNewPost();
      } else if (tab.name === "oldPost") {
        this.getOldPost();
      }
    },
    // 获取最近帖子
    async getNewPost() {
      try {
        this.postLoading = true;
        const res = await getNewPost({
          page: this.page,
          pageSize: this.pageSize,
          ...this.formData,
        });
        this.postData = res.data.records;
        this.total = res.data.total;
      } catch {
        this.$message.error("获取帖子失败");
      } finally {
        this.postLoading = false;
      }
    },
    // 获取往期帖子
    async getOldPost() {
      try {
        this.postLoading = true;
        const res = await getOldPost({
          page: this.page,
          pageSize: this.pageSize,
          ...this.formData,
        });
        this.postData = res.data.records;
        this.total = res.data.total;
      } catch {
        this.$message.error("获取帖子失败");
      } finally {
        this.postLoading = false;
      }
    },
    // 分页查询
    handleCurrentChange(page) {
      this.page = page;
      this.currentPage = page;
      if (this.activeName === "newPost") {
        this.getNewPost();
      } else if (this.activeName === "oldPost") {
        this.getOldPost();
      }
    },
    // 关闭新增对话框的操作
    closeDialog() {
      this.insertLoading = false;
      this.$refs.insertForm.resetFields();
    },
    // 新增帖子
    insert() {
      this.$refs.insertForm.validate(async (v) => {
        if (v) {
          try {
            this.insertLoading = true;
            const res = await insertPost(this.insertForm);
            this.dialogFormVisible = false;
            this.activeName = "newPost";
            await this.getNewPost();
          } finally {
            this.insertLoading = false;
          }
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.post {
  width: 100%;
  height: 100%;
  padding: 10px 60px;
}
</style>